<template>
  <view class="merchant-container">
    <!-- 头部信息 -->
    <view class="profile-header">
      <image :src="merchantData.shopImage" class="shop-image" mode="aspectFill" />
      <view class="shop-info">
        <text class="shop-name">{{ merchantData.shopName }}</text>
        <view class="verify-tag">
          <uni-icons type="checkmark" size="16" color="#fff" />
          <text>已认证</text>
        </view>
      </view>
    </view>

    <!-- 主体信息 -->
    <scroll-view class="info-content" scroll-y>
      <!-- 基础信息 -->
      <view class="info-card">
        <view class="section-title">
          <uni-icons type="info" size="20" color="#007AFF" />
          <text>基础信息</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">经营者姓名</text>
          <text class="info-value">{{ merchantData.name }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">身份证号码</text>
          <text class="info-value sensitive">{{ merchantData.idCard }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">联系电话</text>
          <text class="info-value">{{ merchantData.phone }}</text>
        </view>
      </view>

      <!-- 经营信息 -->
      <view class="info-card">
        <view class="section-title">
          <uni-icons type="shop" size="20" color="#007AFF" />
          <text>经营信息</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">工商执照号</text>
          <text class="info-value">{{ merchantData.licenseNo }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">经营区域</text>
          <text class="info-value">{{ merchantData.region }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">详细地址</text>
          <text class="info-value">{{ merchantData.address }}</text>
        </view>
      </view>

      <!-- 证照信息 -->
      <view class="info-card">
        <view class="section-title">
          <uni-icons type="image" size="20" color="#007AFF" />
          <text>证照信息</text>
        </view>
        
        <view class="image-grid">
          <image 
            :src="merchantData.licenseImage" 
            class="license-image"
            mode="aspectFill"
          />
          <view class="id-card-group">
            <image 
              :src="merchantData.idCardFront" 
              class="id-card"
              mode="aspectFill"
            />
            <image 
              :src="merchantData.idCardBack" 
              class="id-card"
              mode="aspectFill"
            />
          </view>
        </view>
      </view>

      <!-- 商家介绍 -->
      <view class="info-card">
        <view class="section-title">
          <uni-icons type="edit" size="20" color="#007AFF" />
          <text>商家介绍</text>
        </view>
        <text class="description">{{ merchantData.description }}</text>
      </view>
	  
	   <!-- 新增服务管理卡片 -->
	    <view class="info-card action-card">
	      <view class="service-management">
	        <button 
	          class="service-button"
	          hover-class="service-button--hover"
	          @click="handleService"
	        >
	          <view class="button-content">
	            <uni-icons type="notification" size="24" color="#fff" />
	            <text class="button-text">服务项目管理</text>
	            <uni-icons type="forward" size="20" color="rgba(255,255,255,0.8)" />
	          </view>
	        </button>
	      </view>
		</view>
    </scroll-view>

    <!-- 悬浮操作按钮 -->
    <button class="edit-button" @click="handleEdit">
      <uni-icons type="compose" size="20" color="#fff" />
      修改资料
    </button>
  </view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import request from '../../utils/request'

// 商户数据
const merchantData = ref({
  name: '',
  phone: '',
   idCard: '',
  shopName: '',
  licenseNo: '',
  region: '',
  address: '',
  description: '',
  shopImage: '',
  licenseImage: '',
  idCardFront: '',
  idCardBack: ''
});

// const merchantData = ref({
//   name: '张晓明',
//   phone: '138-1234-5678',
//   shopName: '蓝天汽车养护中心',
//   licenseNo: '91370100MA3MXW8R4L',
//   region: '北京市朝阳区',
//   address: '朝阳区建国路88号SOHO现代城C座',
//   description: '专业提供高端汽车保养、精洗、贴膜等服务，十年行业经验，使用国际品牌养护产品，给您爱车最贴心的呵护。',
//   shopImage: 'https://c-ssl.duitang.com/uploads/item/201906/01/20190601121031_sffhw.jpg',
//   licenseImage: 'https://c-ssl.dtstatic.com/uploads/item/201911/03/20191103210749_mlxrk.thumb.1000_0.jpg',
//   idCardFront: 'https://c-ssl.duitang.com/uploads/blog/202108/01/20210801153721_71f5a.thumb.1000_0.jpg',
//   idCardBack: 'https://c-ssl.duitang.com/uploads/blog/202108/01/20210801153719_511bc.thumb.1000_0.jpg'
// })

//修改资料
// const handleEdit = () => {
//   uni.navigateTo({ url: '/pages/change_info/change_info' })
// }
// 修改资料
const handleEdit = () => {
	console.log("打印传递的数据") // 打印传递的数据
	  console.log(merchantData.value) // 打印传递的数据
  uni.navigateTo({
    url: `/pages/change_info/change_info?data=${encodeURIComponent(JSON.stringify(merchantData.value))}`
  });
};
//服务管理
const handleService = () => {
  uni.navigateTo({
    url: '/pages/Service_Management/Service_Management'
  })
}

onMounted(() => {
  fetchMerchantData();
})
// 调用接口获取商户数据
const fetchMerchantData = () => {
	
	  const storeId = uni.getStorageSync('storeId');
  request({
    url: '/mstore/store/list2',
    method: 'GET',
	params: {
	   storeId: storeId // 将 storeId 作为参数传递
	}
  })
    .then((res) => {
      if (res.code == 200) {
        const data = res.data;
		
        // 将接口数据映射到 merchantData
        merchantData.value = {
			storeId: storeId,
		  idCard: data.merchant.idCard,
          name: data.merchant.principal,
          phone: data.merchant.phone,
          shopName: data.storeName,
          licenseNo: data.businessLicenseNo,
          region: data.businessArea,
          address: data.address,
          description: data.description,
          shopImage: data.storeImage,
          licenseImage: data.businessLicenseImage,
          idCardFront: data.merchant.idCardFront,
          idCardBack: data.merchant.idCardBack,
		  userId: data.userId,
		  merchantId:data.merchant.merchantId
        };

      } else {
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        });
      }
    })
    .catch((err) => {
      console.error('接口调用失败:', err);
      uni.showToast({
        title: '网络错误，请重试',
        icon: 'none'
      });
    });
};
</script>

<style lang="scss" scoped>
.merchant-container {
  background: #f8f9fa;
  min-height: 100vh;
}

.profile-header {
  position: relative;
  height: 360rpx;
  
  .shop-image {
    width: 100%;
    height: 100%;
    filter: brightness(0.9);
  }
  
  .shop-info {
    position: absolute;
    bottom: 40rpx;
    left: 40rpx;
    
    .shop-name {
      font-size: 40rpx;
      color: #fff;
      text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
      margin-bottom: 16rpx;
      display: block;
    }
    
    .verify-tag {
      background: rgba(52,199,89,0.9);
      padding: 8rpx 24rpx;
      border-radius: 32rpx;
      display: inline-flex;
      align-items: center;
      
      text {
        color: #fff;
        font-size: 24rpx;
        margin-left: 8rpx;
      }
    }
  }
}

.info-content {
  position: relative;
  margin-top: -40rpx;
  z-index: 2;
}

.info-card {
  background: #fff;
  border-radius: 24rpx;
  margin: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  
  .section-title {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #333;
    padding-bottom: 24rpx;
    margin-bottom: 24rpx;
    border-bottom: 2rpx solid #f0f0f0;
    
    text {
      margin-left: 12rpx;
    }
  }
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32rpx;
  
  .info-label {
    color: #666;
    font-size: 28rpx;
    min-width: 200rpx;
  }
  
  .info-value {
    color: #333;
    font-size: 28rpx;
    text-align: right;
    flex: 1;
    padding-left: 24rpx;
    
    &.sensitive {
      color: #ff4d4f;
      letter-spacing: 2rpx;
    }
  }
}

.image-grid {
  .license-image {
    width: 100%;
    height: 400rpx;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
  }
  
  .id-card-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24rpx;
    
    .id-card {
      width: 100%;
      height: 240rpx;
      border-radius: 16rpx;
    }
  }
}

.description {
  color: #666;
  font-size: 28rpx;
  line-height: 1.6;
}

.edit-button {
  position: fixed;
  bottom: 64rpx;
  right: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 40rpx;
  background: #007AFF;
  color: #fff;
  border-radius: 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,122,255,0.3);
  display: flex;
  align-items: center;
  z-index: 10;
  
  .uni-icons {
    margin-right: 12rpx;
  }
  
  &::after {
    border: none;
  }
  
  &:active {
    opacity: 0.9;
    transform: scale(0.98);
  }
}

.action-card {
  margin-top: 8rpx !important;
}

.service-management {
  padding: 16rpx 0;
  
  &::after {
    border: none; // 移除小程序默认按钮边框
  }
}

.service-button {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(135deg, #007AFF 0%, #0051ff 100%);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.25);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 25%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0) 75%
    );
    animation: shimmer 2s infinite;
  }

  .button-content {
    display: flex;
    align-items: center;
    gap: 16rpx;
  }

  .button-text {
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    letter-spacing: 0.5rpx;
  }
}

.service-button--hover {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
  opacity: 0.9;
}

@keyframes shimmer {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(150%); }
}

</style>
